<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{$t('user.user.60zemoh0nd00')}}</a-breadcrumb-item>
        <a-breadcrumb-item>{{$t('user.user.60zemoh0ows0')}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <c-table-search :loading="form.loading" v-model:model="form.data" @refresh="getData">
      <!-- <a-col :span="8">
        <a-form-item field="keywords" :label="$t('user.user.60zemoh0p680')">
          <a-input v-model="form.data.keywords" :placeholder="$t('user.user.60zemoh0pbk0')" />
        </a-form-item>
      </a-col> -->
      <a-col :span="8">
        <a-form-item field="keywords" :label="$t('user.user.60zemoh0p680')">
          <a-input v-model="form.data.keywords" :placeholder="$t('user.user.60zemoh0pbk0')" />
        </a-form-item>
      </a-col>
      <!-- <a-col :span="8">
        <a-form-item field="section1" :label="$t('user.user.60zemoh0pgs0')" :rules="[{ match: /section one/, message: 'must select one' }]">
          <a-select v-model="form.data.role" :placeholder="$t('user.user.60zemoh0pm40')">
            <a-option value="section one">{{$t('user.user.60zemoh0pq00')}}</a-option>
            <a-option value="section two">{{$t('user.user.60zemoh0puw0')}}</a-option>
            <a-option value="section three">{{$t('user.user.60zemoh0pzw0')}}</a-option>
          </a-select>
        </a-form-item>
      </a-col> -->
      <template v-slot:refresh>
        <a-button type="outline" @click="refresh">
          <template #icon>
            <icon-loop />
          </template>
        </a-button>
      </template>
      <template v-slot:add>
        <a-button type="primary" v-permission="['user:add']" @click="form.create.show = true">
          <template #icon>
            <icon-plus />
          </template>
          {{$t('user.user.60zemoh0q4s0')}}
        </a-button>
      </template>
    </c-table-search>
    <div class="table-scroll">
      <c-table :list="form.list" :loading="form.loading" :count="form.count" v-model:data="form.data"
        @refresh="getData">
        <a-table-column :title="$t('user.user.60zemoh0q940')" ellipsis tooltip :width="70">
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('user.user.60zemoh0p680')" ellipsis tooltip :width="160">
          <template #cell="{ record }">
            {{ record.name? record.name : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('user.user.60zemoh0pgs0')" ellipsis tooltip :width="160">
          <template #cell="{ record }">
            {{ record.role.name? record.role.name : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('user.user.60zemoh0qds0')" ellipsis tooltip :width="160">
          <template #cell="{ record }">
            {{ record.tel? record.tel : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('user.user.60zemoh0qls0')" ellipsis tooltip :width="150">
          <template #cell="{ record }">
            <a-tag color="#f53f3f" v-if="record?.status == 0">{{$t('user.user.60zemoh0qps0')}}</a-tag>
            <a-tag color="#00b42a" v-else-if="record?.status == 1">{{$t('user.user.60zemoh0qts0')}}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :title="$t('user.user.60zemoh0qxk0')" ellipsis tooltip :width="240">
          <template #cell="{ record }">
            {{ record.remark? record.remark : '-' }}
          </template>
        </a-table-column>
        <a-table-column :ellipsis="true" :title="$t('user.user.60zemoh0r300')" :width="240">
          <template #cell="{ record }">
            {{ record.createTime ? dayjs.unix(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('user.user.60zemoh0r6k0')" fixed='right' :width="180">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" v-permission="['user:edit']"  @click="handleUpdata(record)">{{$t('user.user.60zemoh0raw0')}}</a-button>
              <a-button type="text" v-permission="['user:delete']" :disabled="record.id == 3" status="danger" @click="handleDelete(record)">{{$t('user.user.60zemoh0rew0')}}</a-button>
            </a-space>
          </template>
        </a-table-column>
      </c-table>
      <Create @refresh="getData" v-model:show="form.create.show" :roles="form.roles"></Create>
      <Updata @refresh="getData" v-model:show="form.update.show" v-model:data="form.update.data" :roles="form.roles"></Updata>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { apiUserList,apiRoleList,apiUserDelete } from '@/api/setting'
import dayjs from 'dayjs'
const Create = defineAsyncComponent(() => import('./components/create.vue'))
const Updata = defineAsyncComponent(() => import('./components/updata.vue'))
const emit = defineEmits(['refresh'])
const refresh = () => {
  emit('refresh')
}
const form = reactive({
  create: {
    show: false
  },
  update: {
    loading: false,
    show: false,
    data: {},
  },
  data: {
    keywords:'',
    page:1,
    pageSize:20
  },
  loading: false,
  list: [],
  roles:[],
  count: 0
})
// 用户列表
const getData = async () => {
  form.loading = true
  const { code, data } = await apiUserList({
    ...form.data,
    keywords: form.data.keywords,
  })
  form.loading = false
  if (code != 200) return;
  form.list = data.list
  form.count = data.total
}
//角色列表
const getRolesData = async () => {
  const { code, data } = await apiRoleList({
    ...form.data
  })
  if (code != 200) return;
  form.roles = data.list
}
// 编辑
const handleUpdata = (record: any) => {
  form.update.data = cloneDeep(record)
  form.update.show = true
}
// 删除
const handleDelete = async (record: any) => {
  useModal.warning({
    content: t('user.user.60zemoh0rks0'),
    onBeforeOk: async () => {
      const { code } = await apiUserDelete({
        id: record.id
      })
      if (code != 200) return false;
      useMessage.success()
      getData()
      return true
    }
  })
}
onBeforeMount(() => {
  getData()
  getRolesData()
})
</script>

<style scoped lang="less"></style>
